<template>
	<div class="banner">
		<!-- 隐藏菜单 -->
		<div :class="[{'default' : show} ,'slider']" >
			<p>
				<router-link to="/">登录</router-link> / <router-link to="/">注册</router-link>
			</p>
			<form class="search">
					<i class="iconfont">&#xe644;</i>
					<input type="text" value="泰国"/>
			</form>
			<ul>
				<li v-for="item in menus" :key="item.id">
					<router-link to="/">{{item.name}}</router-link>
				</li>
			</ul>
		</div>
		<!-- 主界面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="banner-top">
				<div class="city">
					<router-link to="/Lian">
						<label>{{cityName}}</label>
						<i class="iconfont">&#xe600;</i>
					</router-link>
				</div>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe644;</i>
					<input type="text" placeholder="泰国"/>
				</form>
				<!-- 导航按钮 -->
				<p class="slider-btn" @click="getShow()">
					<a class="iconfont">&#xe61c;</a>
				</p>
			</div>
			<!-- 轮播区域 -->
			<div class="swiper banner-swiper">
				<ul class="swiper-wrapper">
					<li class="swiper-slide" v-for="item in picture" :key="item.id">
						<img :src="item.url" />
					</li>
				</ul>
				 <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
			</div>
		</div>
	</div>
</template>

<script>
// 2引入swiper的动态组件
import Swiper ,{
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
// 3swiper组件应用配置
Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])

//引入State的辅助函数
import {mapState} from 'vuex';
// 导出
export default{
	name:'Banner',
	props : ['propspik'],
	data(){
		return{
			menus : [],
			picture:[],
			
			show:false
		}
	},
	watch:{
		propspik(){
			this.menus = this.propspik.Banner_List;
			this.picture =this.propspik.Banner_newsList;
		}
	},
	methods:{
		getShow(){
			this.show=!this.show;
		}
	},
	computed:{
		//接受state内部的cityName变量
		...mapState(['cityName']),
	},
	// 4设置应用swiper的位置以及具体操作
	updated(){
		
		new Swiper('.banner-swiper',{
			// 循环播放
			loop : true,
			//修改swiper自己或者子元素时自动初始化swiper
			observer : true,
			//修改swiper容器，自动初始化swiper
			observeParents : true,
			// 设置分页器效果
			pagination : {
				el:'.swiper-pagination'
			},
			// 设置播放项:时间、不停止、不暂停自动
			autoplay : {
				delay : 3000,
				stopOnLastSlide : false,
				disableOnInteraction : false,
			}
		})
		
	}
}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: white;
	}
	.main{
		position: relative;
		width: 100%;
		height: 5.6rem;
	}
	
	/* 侧导航栏样式 */
	.slider{
		position: absolute;
		left: -6.6rem;
		top: 0;
		z-index: 6;
		background-color: rgba(62,62,62,0.9);
		height: 100%;
		width: 6.6rem;
		transition: all 0.5s
	}
	/* 动画选择器 */
	.default{
		left: 0;
		transition: all 0.5s;
	}
	.slider a{
		text-decoration: none;
		color: white;
	}
	.slider p{
		line-height: 1.3rem;
		text-align: right;
		padding-right: 0.3rem;
		color: white;
		font-size: 0.35rem;
	}
	.slider .search{
		flex: 1;
		background-color: #484648;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
		width: 90%;
		margin: 0.2rem auto;
	}
	.slider .search i{
		height: 100%;
		display: inline-block;
		font-size: 0.45rem;
		padding-left: 0.2rem;
	}
	.slider .search input{
		background-color: #484648;
		border: none;
		width: 80%;
		line-height: 0.8rem;
		text-indent: 1rem;
		color: white;
		vertical-align: middle;
		outline: none;
	}
	.slider ul{
		margin: 0.5rem auto 0;
		width: 95%;
		
	}
	.slider ul li{
		line-height: 1.3rem;
		text-align: left;
		text-indent: 1em;
		font-size: 0.35rem;
		border-top: 0.04rem solid black;
	}
	.slider ul li a{
		display: block;
	}
	.slider ul li:last-child{
		border-bottom: 0.04rem solid black;
	}

	/* 顶部样式 */
	.banner-top{
		position: absolute;
		left: 0;
		top: 0.2rem;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 0.8rem;
	}
	.banner-top .city{
		color: white;
		font-size: 0.3rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;
		text-decoration: none;
	}
	.banner-top .city i{
		vertical-align: middle;
		padding-left: 0.1rem;
		text-decoration: none;
	}
	.banner-top .search{
		flex: 1;
		background-color: white;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
	}
	.banner-top .search i{
		height: 100%;
		display: inline-block;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}
	.banner-top .search input{
		border: none;
		width: 80%;
		line-height: 0.7rem;
		text-indent: 1rem;
	}
	.banner-top .slider-btn{
		color: white;
		padding-left: 0.4rem;
		padding-right: 0.3rem;
		line-height: 0.8rem;
		vertical-align: middle;
	}
	/* 轮播区域的样式 */
	.banner-swiper{
		width: 100%;
		height: 5.6rem;
		
	}
	.banner-swiper img{
		width: 100%;
		height: 100%;
	}
	
	/* 穿透*/
	.swiper-pagination :deep(.swiper-pagination-bullet-active){
		background-color: black;
	}
</style>
